<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>挖宝首页</title>
		<link rel="stylesheet" href="css/mui.min.css">
		<link rel="stylesheet" href="css/style.css" />
		<link rel="stylesheet" href="css/swiper.min.css">
		<script type="text/javascript" src="js/jquery-2.1.4.js"></script>
		<script src="js/swiper.min.js"></script>
	</head>
	<style>
		html, body {
	    position: relative;
	    height: 100%;
	  }
	  body {
	    background: #eee;
	    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
	    font-size: 14px;
	    color:#000;
	    margin: 0;
	    padding: 0;
	  }
	  .swiper-container {
	    width: 100%;
	    height: 45px;
	  }
	  .swiper-slide {
	    font-size: 1rem;
		height:4rem;
		line-height: 2rem;
		
	  }
	</style>
	<body>
		<div class="app">
			<div class="top-wrap">
				<div class="right-box">
					<div><img src="images/tc.png" alt="" class="xtb" /> 猜拳活动</div>
					<div><img src="images/gz.png" alt="" class="xtb" /> 金币充值</div>
				</div>
			</div>
			<div class="fq-wb">
				<div class="blue"><span>久久夕颜</span>&nbsp;&nbsp;发起此次挖宝，总赏金<span>￥1000</span></div>
				<div class="white blod">挖宝总计<span> 100 </span>次， 剩余<span class="yellow"> 55 </span>次</div>
			</div>
			<div class="main-wrap">
				<div class="content-wrap">
					<div class="box-item"></div>
					<div class="box-item dj"></div>
					<div class="box-item"></div>
					<div class="box-item"></div>
					<div class="box-item color-j right-bt">
						<img src="images/qian.png" alt="" />
						<div class="jinbibeishu"> x 25</div>
					</div>
					<div class="box-item"></div>
					<div class="box-item"></div>
					<div class="box-item jifen">
						<div class="color-yell jifen-bold">积分</div>
						<div class="color-yell">x 5</div>
					</div>
					<div class="box-item"></div>
					<div class="box-item daijinjuan">
						<div class="color-yell">
							<img src="images/yhj-bj.png" alt="" />
							<div>￥50 代金券</div>
						</div>
						<div class="color-yell">x 1</div>
					</div>
					<div class="box-item"></div>
					<div class="box-item"></div>
					<div class="box-item"></div>
					<div class="box-item"></div>
					<div class="box-item"></div>
					<div class="box-item"></div>
					<div class="box-item"></div>
					<div class="box-item"></div>
					<div class="box-item"></div>
					<div class="box-item"></div>
					<div class="box-item"></div>
					<div class="box-item"></div>
					<div class="box-item"></div>
					<div class="box-item"></div>
					<div class="box-item"></div>
					<div class="box-item"></div>
					<div class="box-item"></div>
					<div class="box-item"></div>
					<div class="box-item"></div>
					<div class="box-item"></div>
					<div class="box-item"></div>
					<div class="box-item"></div>
				</div>
				<!-- 				<div class="footerarc ">
					<!--温馨提示1：点击网格挖宝（0个 <img src="images/jinb.png" alt="" />/次），帮助朋友获取商品优惠，您也有幸获得奖励哦^_^
					<div class="swiper-container">
					  <div class="swiper-wrapper">
					    <div class="swiper-slide">1</div>
					    <div class="swiper-slide">2</div>
					    <div class="swiper-slide">3</div>
					  </div>
					</div>
				</div>-->

				<div class="footerarc swiper-container">
					<div class="swiper-wrapper">
						<div class="swiper-slide mui-ellipsis-2">温馨提示1：点击网格挖宝（0个金币/次），帮助朋友获取商品优惠，您也有幸获得奖励哦^_^您也有幸获得奖励哦^_^您也有幸获得奖励哦^_^您也有幸获得奖励哦^_^</div>
						<div class="swiper-slide mui-ellipsis-2">温馨提示1：点击网格挖宝（0个金币/次），帮助朋友获取商品优惠，您也有幸获得奖励哦^_^</div>
						<div class="swiper-slide mui-ellipsis-2">温馨提示1：点击网格挖宝（0个金币/次），帮助朋友获取商品优惠，您也有幸获得奖励哦^_^</div>
					</div>
				</div> 


				<script>
					var swiper = new Swiper('.swiper-container', {
						navigation: {
							nextEl: '.swiper-button-next',
							prevEl: '.swiper-button-prev',
						},
					});
				</script>

			</div>

		</div>

		<!--点击出宝箱-->
		<div class="chubao-box">
			<div><img src="images/cb.png" alt="" /></div>
		</div>

		<!--新手红包-->
		<div class="xshb_box" style="display: none;">
			<div class="xshb_tu"><img src="images/lqu.png" alt="" /></div>
		</div>

		<!--优惠劵弹框-->
		<div class="youhuiquan-box" style="display: none;">
			<div class="content-tankuang">
				<div class="ov">
					<img src="images/close.png" class="close">
				</div>
				<div class="content-top">
					恭喜您挖宝成功!
					<span>稍后朋友将致电感谢您的帮忙！</span>
				</div>
				<div class="content-center">同时，恭喜您获得1张50元抵用券</div>
				<div class="content-dyq"><img src="images/dyq.png" alt="" /></div>
				<div class="content-bottom">
					<div class="fenxiang-bj">分享朋友</div>
					<div class="zaiciwabao-bj">再次挖宝</div>
				</div>
			</div>
		</div>

		<!--金币弹框-->
		<div class="youhuiquan-box" style="display: none;">
			<div class="content-tankuang">
				<div class="ov">
					<img src="images/close.png" class="close">
				</div>
				<div class="content-top">
					恭喜您挖宝成功!
					<span>稍后朋友将致电感谢您的帮忙！</span>
				</div>
				<div class="content-center">同时，恭喜您获得5个金币</div>
				<div class="content-dyq">
					<img src="images/jinb1.png" alt="" class="jinbi-img" />
					<span>x 5</span>
				</div>
				<div class="content-bottom">
					<div class="fenxiang-bj">分享朋友</div>
					<div class="zaiciwabao-bj">再次挖宝</div>
				</div>
			</div>
		</div>

		<!--积分弹框-->
		<div class="youhuiquan-box" style="display: none;">
			<div class="content-tankuang">
				<div class="ov">
					<img src="images/close.png" class="close">
				</div>
				<div class="content-top">
					恭喜您挖宝成功!
					<span>稍后朋友将致电感谢您的帮忙！</span>
				</div>
				<div class="content-center">同时，恭喜您获得5个积分</div>
				<div class="content-dyq">
					<span>积分 x 5</span>
				</div>
				<div class="content-bottom">
					<div class="fenxiang-bj">分享朋友</div>
					<div class="zaiciwabao-bj">再次挖宝</div>
				</div>
			</div>
		</div>

		<!--未成功弹框-->
		<div class="youhuiquan-box" style="display: none;">
			<div class="weicg-tankuang">
				<div class="ov">
					<img src="images/close.png" class="close">
				</div>
				<div class="content-top">
					抱歉，您挖宝未能成功!
					<span>真诚感谢您的踊跃参与！</span>
				</div>
				<div class="content-center">同时，系统赠送您5个积分</div>
				<div class="content-dyq">
					<span>积分 x 5</span>
				</div>
				<div class="content-bottom">
					<div class="fenxiang-bj">分享朋友</div>
					<div class="zaiciwabao-bj">再次挖宝</div>
				</div>
			</div>
		</div>

		<!--温馨提示-->
		<div class="youhuiquan-box" style="display: none;">
			<div class="chongzhi-tankuang">
				<div class="ov">
					<img src="images/close.png" class="close">
				</div>
				<div class="wxts">温馨提示</div>
				<div class="tishi-one">您的金币不够此次的押注.</div>
				<div class="tishi-two">请尽快充值，不要让朋友等太久哦 >_<</div> <div class="tishi-three">现在充值有优惠哦！</div>
				<div class="content-bottom">
					<div class="fenxiang-bj">立即充值</div>
				</div>
			</div>
		</div>

		<!--温馨提示-->
		<div class="youhuiquan-box" style="display: none;">
			<div class="weicg-tankuang">
				<div class="ov">
					<img src="images/close.png" class="close">
				</div>
				<div class="wxts">确认提示</div>
				<div class="wabao-cichu">您确定挖宝挖此处吗？</div>
				<div class="content-bottom">
					<div class="chongxin-bj">重新选择</div>
					<div class="zaiciwabao-bj">确认挖宝</div>
				</div>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		$(function() {
			$(".box-item").click(function() {
				$(".chubao-box").show().delay(1000).hide(0);
			});
			$(".close").click(function() {
				$(".youhuiquan-box").hide();
			});
		});
	</script>
</html>
